import { CSSProperties, useMemo } from 'react';
import { Text, View, Image } from '@tarojs/components';
import { GStyleSheet, DynamicColors } from '@/utils/DarkMode';
import { Button } from '@taroify/core';


const dstyles = GStyleSheet.create({
  bottom: {
    height: 80,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
  },
  manageIcon: {
    width: 16,
    height: 16,
    marginRight: 10,
  },
  button: {
    width: 130,
    margin: '0 24rpx',
  },
});

interface IItem {
  title: string;
  icon?: string;
  color?: string;
  disabled?: boolean;
  variant?: string;
  onClick: () => void;
}

interface IProps {
  style?: CSSProperties;
  data: IItem[]
}

function BottomButtonView({ style, data }: IProps) {
  const styles = dstyles.useDynamicStyle();

  return (
    <View style={{ ...styles.bottom, ...style }}>
      {data.map((item) => (
        <Button
          variant='contained'
          shape='round'
          color='primary'
          {...item}
          key={item.title}
          icon={item.icon ? <Image src={item.icon} style={styles.manageIcon} /> : undefined}
          style={{ marginLeft: 20, marginRight: 20, minWidth: 80, ...item.variant === 'outlined' ? { backgroundColor: 'rgba(0,0,0,0)' } : {} }}
        >
          {item.title}
        </Button>
      ))}
    </View>
  );
}

export default BottomButtonView;

